<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>商品列表</h3>
        <div>一级分类：
            <select v-model="user.first_cateid">
                <option value="" disabled>--请选择--</option>
                <option v-for="item in first_cateid" :key="item.id" :value="item.id">{{item.name}}</option>
            </select>
        </div>
        <div>二级分类：
            <select v-model="user.second_cateid">
                <option value="" disabled>--请选择--</option>
                <option v-for="item in second_cateid" :key="item.id" :value="item.id">{{item.name}}</option>
            </select>
        </div>
        <div>商品名称：<input type="text" v-model="user.goodsname"></div>
        <div>价格：<input type="text" v-model="user.price"></div>
        <div>市场价格：<input type="text" v-model="user.market_price"></div>
        <div>商品规格：
            <select v-model="user.specsid">
                <option value="" disabled>--请选择--</option>
                <option v-for="item in specsid" :key="item.id" :value="item.id">{{item.name}}</option>
            </select>
        </div>
        <div>是否新品：
            <label>
                <input type="radio" v-model="user.isnew" :value="1" name="new">是
            </label>
            <label>
                <input type="radio" v-model="user.isnew" :value="2" name="new">否
            </label>
        </div>
        <div>是否热卖：
            <label>
                <input type="radio" v-model="user.ishot" :value="1" name="hot">是
            </label>
            <label>
                <input type="radio" v-model="user.ishot" :value="2" name="hot">否
            </label>
        </div>
        <div>状态：
            <input type="checkbox" v-model="user.status">
        </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                first_cateid: [{
                        id: 1,
                        name: "家用电器"
                    },
                    {
                        id: 2,
                        name: "美妆护肤"
                    },
                    {
                        id: 3,
                        name: "电子产品"
                    },
                ],
                second_cateid: [{
                        id: 1,
                        name: "精华"
                    },
                    {
                        id: 2,
                        name: "爽肤水"
                    },
                    {
                        id: 3,
                        name: "美容仪"
                    }
                ],
                specsid: [{
                        id: 1,
                        name: "颜色"
                    },
                    {
                        id: 2,
                        name: "大小"
                    },
                    {
                        id: 3,
                        name: "尺寸"
                    }
                ],
                specsattr: [{
                        id: 1,
                        name: "红色"
                    },
                    {
                        id: 2,
                        name: "黄色"
                    },
                    {
                        id: 3,
                        name: "绿色"
                    }
                ],
                //表单数据
                user:{
                    first_cateid:[],
                    second_cateid:[],
                    goodsname:"",
                    price:"",
                    market_price:[],
                    specsid:[],
                    specsattr:"",
                    isnew:"",
                    ishot:"",
                    status:false,
                },
            },
            methods: {}
        })

    </script>
</body>

</html>